<template>
  <n-card :bordered="false" class="proCard">
    <BasicForm @register="register" @submit="handleSubmit" @reset="handleReset">
      <template #statusSlot="{ model, field }">
        <n-input v-model:value="model[field]" />
      </template>
    </BasicForm>

    <BasicTable
      :columns="columns"
      :request="loadDataTable"
      :row-key="(row:ListData) => row.id"
      ref="actionRef"
      :actionColumn="actionColumn"
      @update:checked-row-keys="onCheckedRow"
      :scroll-x="1090"
    >
    </BasicTable>
  </n-card>
</template>

<script lang="ts" setup>
  import { h, reactive, ref } from 'vue';
  import { BasicTable, TableAction } from '@/components/Table';
  import { BasicForm, FormSchema, useForm } from '@/components/Form/index';
  import { getTableList } from '@/api/table/list';
  import { columns, ListData } from './columns';
  import { useRouter } from 'vue-router';

  const schemas: FormSchema[] = [
    {
      field: 'date',
      component: 'NDatePicker',
      label: '时间',
      defaultValue: new Date().getTime(),
      componentProps: {
        type: 'date',
        clearable: true,
        valueFormat: 'yyyy-MM-dd',
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
    {
      field: 'type',
      component: 'NSelect',
      label: '类型',
      componentProps: {
        placeholder: '请选择类型',
        options: [
          {
            label: 'walmart',
            value: 'walmart',
          },
          {
            label: 'target',
            value: 'target',
          },
        ],
        onUpdateValue: (e: any) => {
          console.log(e);
        },
      },
    },
  ];

  const router = useRouter();

  const actionRef = ref();

  const [register, { getFieldsValue }] = useForm({
    gridProps: { cols: '1 s:1 m:2 l:3 xl:4 2xl:4' },
    labelWidth: 80,
    schemas,
  });

  const $message = window['$message'];
  let isFirst = true;
  function formatDate(time) {
    var date = new Date(parseInt(time));
    var year = date.getFullYear();
    var mon = (date.getMonth() + 1 + '').padStart(2, '0');
    var day = date.getDate();
    return year + '-' + mon + '-' + day;
  }
  const loadDataTable = async (res) => {
    const params = getFieldsValue();
    if (JSON.stringify(params) == '{}') return;
    if (!params.type) {
      !isFirst && $message.error('请选择类型');
      isFirst = false;
      return;
    }
    let data = await getTableList({ ...{ ...params, date: formatDate(params.date) }, ...res });
    data = {
      ...data,
      list: data.list.map((v) => {
        const obj = {
          ...v,
        };
        v.total_list.forEach((item, index) => {
          if (index < 5) {
            obj[['one', 'two', 'three', 'four', 'five'][index] + '_order_money'] = item;
          }
        });
        return obj;
      }),
    };
    return data;
  };

  function onCheckedRow(rowKeys) {
    console.log(rowKeys);
  }

  function reloadTable() {
    actionRef.value.reload();
  }

  function handleSubmit(values: Recordable) {
    console.log(values);
    reloadTable();
  }

  function handleReset(values: Recordable) {
    console.log(values);
  }
</script>

<style lang="less" scoped></style>
